<template>
	<!-- <view v-if="loading" class="chat-loading">
		<Loading :size="20" :mask="false">
			消息接收中
		</Loading>
	</view> -->
	<!-- <up-loading-page :loading="loading" loading-text="消息接收中" :icon-size="30" font-size="16"
		bg-color="rgba(255,255,255,0.9)" color="#3b82f6" loading-color="#3b82f6"></up-loading-page> -->
	<up-line-progress v-if="!displayProgress" :percentage="percentage" height="3" :showText="false"
		active-color="#3b82f6"></up-line-progress>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import Loading from '@/components/loading/loading.vue'
	import useChatStore from '@/store/chatStore.js'
	const chatStore = useChatStore()
	const loading = computed(() => chatStore.loadingGroupMsg || chatStore.loadingPrivateMsg)
	const percentage = ref(0)
	const displayProgress = ref(false)
	onLoad(() => {
		const interval = setInterval(() => {
			if (loading.value) {
				if (percentage.value >= 100) {
					percentage.value = 0
				} else if (percentage.value < 95) {
					percentage.value += Math.floor(Math.random() * 5);
					displayProgress.value = false
				} else if (percentage.value >= 95) {
					percentage.value += Math.floor(Math.random());
					displayProgress.value = false
				} else if (percentage.value >= 98) {
					displayProgress.value = false
					// 不再增加进度
					// percentage.value += Math.floor(Math.random());
				} else {
					setTimeout(() => {
						// clearInterval(interval);
						displayProgress.value = true
					}, 100)
				}
			} else {
				percentage.value = 100; // 如果loading变为false，立即完成进度
				setTimeout(() => {
					// clearInterval(interval);
					displayProgress.value = true
				}, 500)
			}
		}, 500)
	})
</script>

<style lang="scss" scoped>
	.chat-loading {
		display: block;
		width: 100%;
		padding: 50rpx 0;
		background: rgba(255, 255, 255, 0.5);
		position: fixed;
		top: 0;
		z-index: 999;
		color: #3b82f6;

		.loading-box {
			position: relative;
		}
	}

	:deep(.u-loading-icon__spinner) {
		animation-duration: 500ms !important;
	}

	.u-transition {
		z-index: 99 !important;
	}
</style>